<!--
 * @Descripttion:
 * @Author: Silence
 * @Date: 2023-05-27 21:02:59
 * @LastEditors: Silence
 * @LastEditTime: 2023-05-28 21:21:11
-->
<template>
  <div>
    <header class="header">
      <!-- 左右固定，中间自适应 -->
      <!-- 左边的城市 -->
      <div class="city">北京</div>

      <!-- 中间的搜索 -->
      <div class="search">
        <!-- <i class="iconfont icon-search"></i> -->
        <input type="search" placeholder="输入小区名词或商圈" />
      </div>

      <!-- 右边的聊天 -->
      <div class="chat"></div>
      <router-link to="/login">退出登录</router-link>
    </header>
  </div>
</template>
<script>
export default {
  name: 'FirstBox',
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
.header {
  // 弹性盒子
  display: flex;
  // 固定定位
  position: fixed;
  top: 0;
  // 层级最高
  z-index: 999;
  width: 100vw;
  height: 15.067vw;
  padding: 3.333vw 0;
  background-color: #fff;

  // 左边的城市
  .city {
    width: 17.6vw;
    padding-left: 4.133vw;
    line-height: 8.533vw;
    font-size: 3.2vw;
  }

  // 中间的搜索
  .search {
    position: relative;
    flex: 1;

    i {
      // 子绝父相垂直居中
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 4.267vw;
      font-size: 3.2vw;
      color: #919191;
    }

    input {
      // input默认不会占满search的一行，需要手动设置width：100%，高度和search一致，也需要设置100%
      width: 100%;
      height: 100%;
      padding-left: 10.4vw;
      background-color: #f7f7f7;
      border-radius: 4.267vw;
      font-size: 3.2vw;
    }
  }

  // 右边的聊天
  .chat {
    width: 15.467vw;
    // background: url('../images/header_news.png') no-repeat 6.667vw center;
    background-size: 4.8vw 4.8vw;
  }
}
</style>
